<template>
    <div class="container">
        <div class="box">
            <div class="login-content-left">
                <img :src="loginLeftPng" />
                <div class="login-content-left-mask">
                    <div>{{ systemTitle }}</div>
                    <div>{{ systemSubTitle }}</div>
                </div>
            </div>

            <div class="box-inner">
                <h1>欢迎登录</h1>

                <el-form class="form">
                    <el-input v-model="form.username" maxlength="50" placeholder="用户名" size="large" type="text">
                        <template #prepend>
                            <i class="sfont system-xingmingyonghumingnicheng"/>
                        </template>
                    </el-input>

                    <el-input ref="password" v-model="form.password" :type="passwordType" maxlength="50" name="password" placeholder="密码" size="large">
                        <template #prepend>
                            <i class="sfont system-mima"/>
                        </template>

                        <template #append>
                            <i :class="passwordType ? 'system-yanjing-guan': 'system-yanjing'" class="sfont password-icon" @click="passwordTypeChange"/>
                        </template>
                    </el-input>

                    <el-button :loading="form.loading" size="medium" style="width: 100%;" type="primary" @click="submit">
                        登录
                    </el-button>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { systemSubTitle, systemTitle } from "@/config"
import { reactive, ref }               from "vue"
import { ElMessage }                   from "element-plus"
import loginLeftPng                    from "@/assets/login/left.jpg"
import { useUserStore }                from "@/store/user.js"
import NProgress                       from "@/utils/system/nprogress.js"

const form = reactive({
    username: "admin",
    password: "123456",
    loading : false,
})

// 密码显示隐藏
const passwordType       = ref("password")
const passwordTypeChange = () => {
    passwordType.value === "" ? passwordType.value = "password" : passwordType.value = ""
}

// 检查
async function checkForm(){
    if(form.username === ""){
        ElMessage.error({
            message: "用户名不能为空",
            type   : "warning",
        })
        return false
    }

    if(form.password === ""){
        ElMessage.error({
            message: "密码不能为空",
            type   : "warning",
        })
        return false
    }

    return true
}

const userStore = useUserStore()

// 登录
async function submit(){
    let res = await checkForm()
    if(!res){
        return
    }

    form.loading = true

    // 调用登录接口,设置令牌(替换自己的实际业务接口)
    userStore.setToken("token")

    // 根据令牌,设置用户信息(替换自己的实际业务接口)
    userStore.setInfo({ name: "管理员", sex: "男" })

    location.reload()
    form.loading = false
}

</script>

<style lang="scss" scoped>
.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff url('@/assets/login/bg.png') no-repeat center;
    overflow: hidden;
    background-size: cover;
    cursor: pointer;
    user-select: none;

    .box {
        width: 1160px;
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        background: white;
        border-radius: 8px;
        transform: translate(-50%, -50%);
        height: 440px;
        overflow: hidden;
        box-shadow: 0 6px 20px 5px rgba(152, 152, 152, 0.1),
        0 16px 24px 2px rgba(117, 117, 117, 0.14);

        .login-content-left {
            position: relative;

            img {
                height: 440px;
            }

            .login-content-left-mask {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(rgba(0, 204, 222, 0.8), rgba(51, 132, 224, 0.8));
                text-align: center;
                color: #fff;
                font-size: 1.8rem;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                letter-spacing: 2px;

                div:nth-child(1) {
                    font-size: 3.5rem;
                    margin-bottom: 1em;
                }
            }
        }

        .box-inner {
            width: 500px;

            h1 {
                margin-top: 80px;
                text-align: center;
            }

            .form {
                width: 80%;
                margin: 50px auto 15px;

                .el-input {
                    margin-bottom: 20px;
                }

                .password-icon {
                    cursor: pointer;
                    color: #409eff;
                }
            }

            .fixed-top-right {
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
    }
}

@media screen and (max-width: 1260px) {
    .login-content-left {
        display: none;
    }
    .box {
        width: 500px !important;
    }
}

@media screen and (max-width: 750px) {
    .container .box, .container .box-inner {
        width: 100vw !important;
        height: 100vh;
        box-shadow: none;
        left: 0;
        top: 0;
        transform: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h1 {
            margin-top: 0;
        }

        .form {
        }
    }
}
</style>
